<template>
  <list-condition-template
    ref="table"
    :rows="rows"
    :defaultSort="{ prop: 'createTime', order: 'descending' }"
    :total="total"
    @page-info-change="handlePageInfoChange"
    :search-data="listQuery"
    :batch-column="false"
  >
    <template slot="condition">
      <el-tabs v-model="listQuery.orderState" @tab-click="orderStateChange">
        <el-tab-pane label="全部订单" :name="null"></el-tab-pane>
        <el-tab-pane
          v-for="(item, key) in $CONST.ORDER_STATUS"
          :key="key"
          :label="item.title"
          :name="item.name"
        ></el-tab-pane>
      </el-tabs>

      <el-form-item prop="keyword">
        <el-input
          placeholder="订单号"
          v-model="listQuery.keyword"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="payType">
        <el-select
          v-model="listQuery.payType"
          value-key="name"
          clearable
          placeholder="支付方式"
        >
          <el-option
            v-for="(item, key) in $CONST.PAY_TYPE"
            :key="key"
            :label="item.title"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item prop="orderStatus">
        <el-select
          v-model="listQuery.orderStatus"
          value-key="title"
          clearable
          placeholder="订单状态"
        >
          <el-option
            v-for="(item, key) in $CONST.ORDER_STATUS"
            :key="key"
            :label="item.title"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item> -->

 <el-form-item
        prop="factoryId"
      >
        <el-select
          v-model="listQuery.factoryId"
          placeholder="厂商"
          filterable
          clearable
          value-key="id"
          :loading="selectLoading"
          @focus="getFactorySelect"
        >
          <el-option
            v-for="item in factorys"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="photoStudioId">
        <el-select
          v-model="listQuery.photoStudioId"
          placeholder="影楼"
          filterable
          clearable
          :loading="selectLoading"
          @focus="getStudioSelect"
        >
          <el-option
            v-for="item in studios"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="dateArray">
        <el-date-picker
          v-model="listQuery.dateArray"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="center"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
    </template>
    <template slot="columns">
      <el-table-column
        label="订单编号"
        min-width="150"
        align="center"
        property="serialNumber"
        fixed
      ></el-table-column>
      <el-table-column
        label="商品"
        align="center"
        property="orderGoods.name"
      ></el-table-column>
      <el-table-column
        label="订单金额（元）"
        align="center"
        property="amount"
      ></el-table-column>
      <el-table-column
        label="支付方式"
        align="center"
        property="payType.desc"
      ></el-table-column>
      <el-table-column
        label="影楼"
        min-width="100"
        align="center"
        property="studio.name"
      ></el-table-column>
      <el-table-column
        label="订单状态"
        align="center"
        property="state.desc"
      ></el-table-column>
      <el-table-column
        label="下单时间"
        sortable="custom"
        min-width="150"
        align="center"
        property="createTime"
      ></el-table-column>
      <el-table-column
        align="center"
        label="操作"
        min-width="200"
        class-name="fixed-width"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="showDetail(scope.row)"
            v-waves
            >查看</el-button
          >
          <order-control
            style="margin-left:10px;"
            v-if="scope.row.state"
            :orderId="scope.row.id"
            @onSuccess="getList"
            :orderState="scope.row.state"
          />
        </template>
      </el-table-column>
    </template>
  </list-condition-template>
</template>

<script>
import factoryAPI from '@/api/factory'
import orderApi from '@/api/order'
import studioAPI from '@/api/photoStudio'
import orderControl from '@/components/order/OrderControl'
import waves from '@/directive/waves' // 水波纹指令
import ListConditionTemplate from '@/components/templates/listConditionTemplate'

export default {
  directives: {
    waves
  },
  components: {
    ListConditionTemplate,
    orderControl
  },
  data () {
    return {
      selectLoading: false,
      rows: [],
      total: 0,
      dateArray: [],
      listQuery: {
        factoryId: null,
        keyword: null,
        dateArray: null,
        payType: null,
        photoStudioId: null
      },
      studios: []
    }
  },
  methods: {
    getFactorySelect () {
      if (this.listQuery.factoryId) {
        return
      }
      this.selectLoading = true
      factoryAPI
        .getAll({ showLoading: false })
        .then((res) => {
          this.factorys = res.data
          this.selectLoading = false
        })
        .catch((e) => {
          this.selectLoading = false
        })
    },
    orderStateChange (tab, event) {
      this.handleFilter()
    },
    /**
     * 查询影楼下拉框信息
     */
    getStudioSelect (keyword) {
      if (this.listQuery.photoStudioId) {
        return
      }
      this.selectLoading = true
      studioAPI
        .getAll({ showLoading: false })
        .then((res) => {
          this.studios = res.data
          this.selectLoading = false
        })
        .catch((e) => {
          this.selectLoading = false
        })
    },
    /**
     * 加载数据
     */
    getList (pageInfo) {
      if (
        Array.isArray(this.listQuery.dateArray) &&
        this.listQuery.dateArray.length === 2
      ) {
        this.listQuery.startTime = this.listQuery.dateArray[0] + ' 00:00:00'
        this.listQuery.endTime = this.listQuery.dateArray[1] + ' 23:59:59'
      } else {
        this.listQuery.startTime = null
        this.listQuery.endTime = null
      }
      orderApi
        .getPaged({ condition: this.listQuery, pageInfo })
        .then((response) => {
          console.log('res', response)

          this.rows = response.data.content
          this.total = response.data.totalElements
        })
    },
    /**
     * 搜索条件变更处理
     */
    handleFilter () {
      this.$refs.table.changeCondition()
    },
    /**
     * 分页信息变动事件处理
     * @param  {Object} pageInfo 分页信息
     */
    handlePageInfoChange (pageInfo) {
      this.getList(pageInfo)
    },
    /**
     * 查看详情点击处理
     * @param {*} row 参数
     */
    showDetail (row) {
      this.$router.pushTo(this.$router.routesConfig.orderInfo, row.id)
    }
  },
  beforeDestroy () {
    this.$EventBus.$off('searchOrder')
  },
  created () {
    if (this.$route.params) {
      this.listQuery.keyword = this.$route.params.keyword
    }
  },
  mounted () {
    this.$EventBus.$on('searchOrder', (keyword) => {
      this.listQuery.keyword = keyword
      this.handleFilter()
    })
  }
}
</script>
<style lang="scss">
.condition {
  margin-right: 10px;
}
</style>
